<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div class="container">
      <ul class="top">
        <!-- 基础模板 -->
        <!-- <li>
          <a href="javascript:;">首页</a>
          <img
            src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/201516e3-25d0-48f5-bcee-7f0cafb14176.png"
            alt=""
          />
          <ul class="sub">
            <li>
              <a href="javascript:;">
                <span>砂锅厨具</span>
                <img
                  src="https://yanxuan.nosdn.127.net/3102b963e7a3c74b9d2ae90e4380da65.png?quality=95&imageView"
                  alt=""
                />
              </a>
            </li>
          </ul>
        </li> -->
      </ul>
    </div>
    <!-- <script src="./axios.js"></script> -->
    <!-- <script src="./上课写的index.js"></script> -->
    <!-- <script src="./index2.js"></script> -->
    <!-- <script src="./修改版index.js"></script> -->

    <script src="./js/axios.js"></script>

    <!-- <script src="./js/index - then.js"></script> -->

    <script src="./js/index - await.js"></script>

    <script>
      // 设置基地址
      // axios.defaults.baseURL = 'http://ajax-api.itheima.net'

      // const list = document.querySelector('.top')
      // axios({
      //   url: '/api/category/top',
      //   method: 'GET',
      // })
      //   .then(({ data: res }) => {
      //     const { data } = res
      //     const axiosArr = data.map((item) => {
      //       return axios({
      //         url: '/api/category/sub?id=' + item.id,
      //         method: 'GET',
      //       })
      //     })
      //     // 等所有数据全部跑完后获取
      //     return Promise.all(axiosArr)
      //   })
      //   .then((res) => {
      //     // console.log(res);
      //     list.innerHTML = res
      //       .map(({ data: item }) => {
      //         // console.log(item);
      //         return `
      // <li>
      //     <a href="javascript:;">${item.data.name}</a>
      //     <img
      //       src="${item.data.picture}"
      //       alt=""
      //     />
      //     <ul class="sub">
      //     ${item.data.children
      //       .map((item) => {
      //         return `
      //       <li>
      //         <a href="javascript:;">
      //           <span>${item.name}</span>
      //           <img
      //             src="${item.picture}"
      //             alt=""
      //           />
      //         </a>
      //       </li>
      //       `
      //       })
      //       .join('')}
      //     </ul>
      //   </li>
      // `
      //       })
      //       .join('')
      //   })
    </script>
  </body>
</html>
